<template lang="">
  <div
    class="absolute companyBox color-white suidp-bg "
    style="overflow:hidden;overscroll-behavior-y: contain;"
    :style="{
      fontSize: 18 * scaleNum + 'px',
      height: `${500 * scaleNum}px`,
      maxHeight: `${500 * scaleNum}px`,
      width: `${360 * scaleNum}px`,
      right: `${10 * scaleNum}px`,
      bottom: `${10 * scaleNum}px`
    }"
  >
    <div
      :style="{
        height: `${40 * scaleNum}px`
      }"
    >
      <el-input
        placeholder="请输入搜索条件"
        v-model="searchText"
        clearable
        class="input-with-select full-height"
        :style="{
          height: `${40 * scaleNum}px`,
          fontSize: `${16 * scaleNum}px`
        }"
      >
        <el-button
          type="success"
          class="active-bg"
          slot="append"
          @click="getCompanyList"
          icon="el-icon-search"
        ></el-button>
      </el-input>
    </div>

    <div
      class="inset-shadow-active listBox "
      :style="{
        padding: `${10 * scaleNum}px ${10 * scaleNum}px ${10 *
          scaleNum}px ${10 * scaleNum}px `
      }"
    >
      <div
        class=" bold pdb8"
        :style="{
          paddingBottom: `${8 * scaleNum}px`
        }"
      >
        服务地点
      </div>

      <div
        class="scrollbar-white-slinder1 lh35 pdt10 border-top-active  scrollbox"
        :style="{
          lineHeight: `${38 * scaleNum}px`,
          height: `${390 * scaleNum}px`,
          paddingBottom: `${30 * scaleNum}px`,
          paddingTop: `${10 * scaleNum}px`
        }"
      >
        <div class="pdt18" v-if="companyData.length == 0">
          暂无数据
        </div>
        <div
          v-for="(item, index) in companyData"
          v-loading="loading"
          :key="index"
          class="text-normal pointer relative"
        >
          <!-- <div class="absolute" style="right:6px;top:0px">
            {{ item.fuwuList.length }}个
          </div> -->
          <el-tooltip
            v-if="item.companyTreeName.length > 7"
            class="item"
            effect="dark"
            :content="item.companyTreeName"
            placement="top-end"
          >
            <span class=" ">
              <i class="el-icon-s-home color-warning1"></i>
              {{ item.companyTreeName }}</span
            >
          </el-tooltip>
          <span class=" " v-else>
            <i class="el-icon-s-home color-warning1"></i>
            {{ item.companyTreeName }}</span
          >
          <div v-if="item.fuwuList" style="padding-left:20px">
            <div
              v-for="(child, childIndex) in item.fuwuList"
              :key="childIndex"
              class="text-normal hover-active"
              @click.stop="setCompanyInfo(child)"
            >
              <el-tooltip
                v-if="child.name.length > 9"
                class="item"
                effect="dark"
                :content="child.name"
                placement="top-end"
              >
                <span class=" ">
                  <i class="el-icon-school color-warning"></i>
                  {{ child.name }}</span
                >
              </el-tooltip>
              <span class=" " v-else>
                <i class="el-icon-school color-warning"></i>
                {{ child.name }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { suizhiguanGetCompanyList } from "@/api";
import { mapState } from "vuex";
export default {
  data() {
    return {
      searchText: "",
      packgeInfo: {
        page: 1,
        size: 100,
        total: 0
      },
      loading: false,
      companyData: []
    };
  },
  props: {
    scaleNum: {
      type: Number,
      default: 1
    }
  },
  mounted() {
    this.getCompanyList();
  },
  methods: {
    setCompanyInfo(data) {
      this.$emit("setCompanyInfo", data);
    },
    async getCompanyList() {
      this.loading = true;
      this.companyData = [];
      let params = {
        companyTreeName: this.searchText,
        page: 1,
        size: 1000
      };
      let { data } = await suizhiguanGetCompanyList(params).finally(() => {
        this.loading = false;
      });
      this.companyData = data?.list || [];
      this.$emit("setCompanyData", this.companyData);
      this.packgeInfo.total = data?.total;
    }
  }
};
</script>
<style lang="scss" scoped>
.companyBox {
  height: 500px;
  max-height: 500px;
  width: 360px;
  right: 10px;
  bottom: 10px;
}
.scrollbox {
  height: 390px;
  padding-bottom: 30px;
}
</style>
<style lang="scss">
.companyBox {
  .el-input-group__append,
  .el-input-group__prepend {
    background: #1198ff;
    border-color: #1198ff;
  }
}
.input-with-select {
  input {
    height: 100%;
  }
}
</style>
